<template>
    <ul class="nav-user">
        <li v-show="!buttonShow">
            <el-button @click="createArticle">写文章</el-button>
        </li>
        <template v-if="!useToken">
            <li>
                <router-link to="/sign-in">
                    <el-button>登录</el-button>
                </router-link>
            </li>
            <li style="margin-left: 0">
                <router-link to="/sign-up">
                    <el-button type="primary">注册</el-button>
                </router-link>
            </li>
        </template>
        <template v-else>
            <li>
                <user-notify></user-notify>
            </li>
            <li>
                <user-head></user-head>
            </li>
        </template>
    </ul>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
import userNotify from './user-notify.vue'
import userHead from '@/components/common/user-head.vue'
import useStore from '@/store'
const { user, search } = useStore()
const { useToken } = storeToRefs(user)
const { isFocus } = storeToRefs(search)
// 监听focus, 按钮由隐藏到显示加上100毫秒，防止抖动
let buttonShow = ref<boolean>(false)
watch(isFocus, val => {
    if (val) {
        buttonShow.value = val
    } else {
        setTimeout(() => buttonShow.value = false, 100)
    }
})

// 创建文章按钮判断是否登录
// TODO 先判断登录是否失效
const router = useRouter()
const createArticle = () => {
    if (!useToken) {
        router.push({ path: '/sign-in' })
    } else {
        router.push({ path: '/editor' })
    }
}


</script>

<style lang="less" scoped>
.nav-user {
    margin-left: auto;
    display: flex;
    align-items: center;

    >li {
        margin: 0 12px;
        height: 100%;
        display: flex;
        align-items: center;

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>
